<template>
    <div>

    </div>
</template>

<script setup>
/**
 * watch 函数
    * 作用：侦听数据变化
        * 1、侦听一个响应式数据
        * 2、侦听多个响应式数据
        * 3、侦听响应式对象中的一个属性（简单）
        * 4、侦听整个响应式对象（复杂），配置深度侦听
        * 5、配置默认执行
    * 使用：
        * 1、从 vue 中导入 watch 函数
        * 2、使用watch函数，传入要侦听的数据、处理函数、配置项
    * 语法结构：
        * watch(要侦听的数据，数据变化时执行的函数，配置对象)
 */

import { ref, watch } from 'vue'
// 1、侦听一个响应式数据
// let num = ref(18)
// watch(num, (val) => {
//     console.log(val)
// })

// 2、侦听多个响应式数据
// let x = ref(10)
// let y = ref(20)
// watch([x, y], (val) => {
//     console.log(val)
// })

// 3、侦听响应式对象中的一个属性（简单）
// let cat = ref({
//     name: '小白脚',
//     age: 3
// })
// watch(() => cat.value.age, (val) => {
//     console.log(val)
// })

// 4、侦听整个响应式对象
let cat = ref({
    name: '小白脚',
    age: 3
})
watch(cat, (val) => {
    console.log(val)
}, {
    deep: true, // 开启深度侦听
    immediate: true // 立即侦听
})
</script>

<style lang="scss" scoped></style>